<template>
  <div class="top">
    <div class="top-wenzi">
      <span>广州</span>
      <span>影院</span>

      <span> <i class="iconfont icon-sousuo"></i></span>
    </div>
  </div>
  <div class="box1" v-for="(item, index) in data" :key="index">
    <div class="box2">
      <span class="wen1">{{ item.name }}</span>
      <div class="box3"><span class="wen2">{{ item.address }}</span></div>
      <div class="box4">{{ item.date }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import http from '../util/api';

const data = ref([]);
http('/cinema', 'get').then((res) => {
  if (res.data.length) {
    data.value = res.data;
  } else {
    console.log();
  }
});
console.log();

</script>

<style scoped>
.top {
  height: 150px;
  top: 0px;
  bottom: 0px;
  background-color: #ff4c4c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align-last: justify
}

.top-wenzi {
  display: flex;
  justify-content: space-between;
  width: 680px;
  color: white;
  font-size: 40px;
  line-height: 150px;
}

.box1 {
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 200px;
  border-bottom: 1px solid rgb(140, 140, 140);
}

.box2 {
  margin-left: 30px;
  margin-top: 25px;
}

.box3 {
  margin-top: 10px;
}

.box4 {
  margin-top: 20px;
}

.wen1 {
  font-size: 45px;
  font-weight: bold;
}

.wen2 {
  font-size: 34px;
  color: #888;

}

span {

  margin-right: 15px;
}

.xbox {
  padding: 5px;
  color: rgb(255, 197, 39);
  border: 1px solid rgb(255, 197, 39);
}

.icon-sousuo {
  font-size: 60px;
}
</style>
